<template>
  <div class="scorecreatewrapper zanwei-top">
    <!-- 停车券核销页面 -->
    <head-nav></head-nav>
    <div class="scorecreate" v-if="rowobj">
      <div class="scorecreate-top-img">
        <!-- <img v-if="rowobj.XQT[0]" :src="rowobj.XQT[0]"/> -->
      </div>
      <div class="scorecreate-top">
        <h3>{{rowobj.TCSJ}}小时停车券</h3>
        <p>恭喜您兑换成功！</p>
        <!-- <div class="fhlist">
          <mt-button type="primary" @click.native="gobacklist">继续逛逛</mt-button>
        </div>-->
      </div>
      <div class="scorecreate-bottom">
        <div class="qrcode" id="qrcode">
          <!-- <img/> -->
        </div>
        <p style="margin-bottom: 0.3rem;">订单编号：{{rowobj.ID}}</p>
        <!-- <p style="margin-bottom: 0.3rem;" v-if="rowobj.TRANSACTION_ID">交易单号：{{rowobj.TRANSACTION_ID}}</p> -->
        <!-- <p>验证码已经生成，请凭验证码及有效证件至五楼贵宾厅兑换领取。</p> -->
        <!-- <p>{{rowobj.HXDD}}</p> -->
      </div>
    </div>
    <div class="zanwei-bottom"></div>
  </div>
</template>
<script>
import api from "@/api/api";
import { Toast, MessageBox } from "mint-ui";
import { mapActions } from "vuex";
var sss;
var setTime;

export default {
  data() {
    return {
      rowobj: null
    };
  },
  methods: {
    ...mapActions({
      commit_title1: "commit_title"
    }),
    // 返回列表
    gobacklist() {
      // this.$router.go(-3); //返回上3层
      this.$router.push("/wallet");
    },
    checkHX(id) {
      let page = this;
      var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
      api.cKtcqHx(page, userinfo.vipcode, id, cb);
      function cb(res) {
        let re = res.data;
        // debugger;
        if (re.code == 0) {
          let data = re.data;
          let hx = data;
          if (hx == 1) {
            clearInterval(sss);
            Toast({
              message: "已核销",
              iconClass: "iconfont icon-duigou yhx",
              duration: 3000
            });
            setTimeout(function() {
              page.$router.push("/wallet");
            }, 3000);
          }
        } else {
          Toast({
            message: re.msg,
            duration: 3000
          });
        }
      }
    }
  },
  mounted() {
    let page = this;
    // if (Object.getOwnPropertyNames(this.$route.params).length !== 0 && this.$route.params.id !== '[object Object]') {
    let id = this.$route.query.id;
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    api.getTcq(page, userinfo.vipcode, id, cb);
    function cb(res) {
      let re = res.data;
      if (re.code == 0) {
        let data = re.data;
        console.log("停车券-核销详情");
        console.log(data);
        page.rowobj = data;
        page.$nextTick(function() {
          var qrcode = new QRCode(document.getElementById("qrcode"), {
            text: "tcq@@@@"+data.ID+"@@@@"+userinfo.vipcode,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff"
          });
        });
        // 核销监听
        let date = new Date();
        if (page.rowobj.SFHX == 0) {
          sss = setInterval(function() {
            let dateNow = new Date();
            let time = dateNow - date;
            console.log(time);
            if (time < 300000) {
              page.checkHX(id);
            } else {
              clearInterval(sss);
              MessageBox.alert("长时间未核销正帮您跳转..").then(action => {
                page.$router.push({ path: "/score" });
              });
            }
          }, 1000);
        }
      } else {
        Toast({
          message: re.msg,
          duration: 3000
        });
      }
    }

    // } else {
    //   console.log('xixixi2')
    // }
  },
  destroyed() {
    clearInterval(sss);
    clearTimeout(setTime);
  }
};
</script>

<style lang="less">
.yhx {
  font-size: 0.55rem;
}
.scorecreatewrapper {
  .scorecreate {
    .scorecreate-top-img {
      /* width: 4.4rem;
      height: 1.7rem;
      border: #cbcbcc solid 1px;
      margin-top: 1.12rem;
      margin-bottom: 0.6rem; */
      width: 100%;
      height: 2rem;
      /* border: #cbcbcc solid 1px; */
      margin-bottom: 0.4rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .scorecreate-top {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 0.2rem;
      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #F05DC4;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
      }
      h3 {
        font-size: 0.32rem;
        color: #000000;
      }
      span {
        color: #F05DC4;
        font-size: 0.32rem;
        margin-top: 0.2rem;
        margin-bottom: 0.6rem;
      }
      b {
        display: block;
        color: #000000;
        font-size: 0.24rem;
      }
      p {
        color: #F05DC4;
        font-size: 0.32rem;
        margin-top: 0.04rem;
        margin-bottom: 0.2rem;
        text-indent: 0.28rem;
      }
    }
    .scorecreate-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      .qrcode {
        width: 2.8rem;
        height: 2.8rem;
        /* border: #cbcbcc solid 1px; */
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        width: 4.56rem;
        font-size: 0.24rem;
        color: #000000;
        text-align: center;
      }
    }
  }
}
.fhlist {
  padding-bottom: 0.2rem;
}
</style>